<template>
  <div>
    <div>
      <el-input v-model="search.name" class="w-50 m-2" placeholder="搜索框" prefix-icon="Search"
        style="width: 20%;min-width: 100px;" />
    </div>

    <el-table :data="UserList" border style="width: 100%">

      <el-table-column label="Date" prop="date">
        <template #header>
          Name
        </template>
        <template #default="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>

      <el-table-column label="拥有角色" prop="date">
        <template #header>
          拥有角色S
        </template>
        <template #default="scope">
          <el-tag v-for="item in scope.row.roleEntityList" closable
            @close="on_deleteUserRole(scope.row.UID, item.roleID)">
            {{ item.roleName }}
          </el-tag>
          <el-tag round @click="on_dialogRole(scope.row.UID)">
            <el-icon>
              <CirclePlus />
            </el-icon>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="拥有权限" prop="date">
        <template #header>
          拥有权限
        </template>
        <template #default="scope">
          <el-tag v-for="item in scope.row.permsEntityList" closable
            @close="on_deleteUserPerms(scope.row.UID, item.permsID)">
            {{ item.permsName }}
          </el-tag>
          <el-tag round @click="on_dialogPerms(scope.row.UID)">
            <el-icon>
              <CirclePlus />
            </el-icon>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template #header>
          a
        </template>
        <template #default="scope">
          <el-button size="small">Edit</el-button>
          <el-button size="small" type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogRole_show" title="Tips" width="500" draggable>
      <dialogsRole v-if="dialogRole_show" :param="dialog_UID"  @call-getRoleList="getUserRoleAndPerms"/>
    </el-dialog>
    <el-dialog v-model="dialogPerms_show" title="Tips" width="500" draggable>
      <dialogsPerms v-if="dialogPerms_show" :param="dialog_UID"  @call-getRoleList="getUserRoleAndPerms"/>
    </el-dialog>
  </div>
</template>
<style scoped></style>
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch } from 'vue'
import api from '/@/api/sy/apiLog.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import dialogsRole from './zi/limitsUser_RoleDialog.vue'
import dialogsPerms from './zi/limitsUser_PermsDialog.vue'

let search = ref({
  name: '',
  currentIndex: 0,
  pageSize: 10,
})
// 弹窗
let dialogRole_show = ref(false)
let dialogPerms_show = ref(false)
// 子弹窗传参
let dialog_UID = ref()

interface RowRole {
  roleID: number | null
  parentRoleID: number | null
  roleName: string | null
  createTime: Date | null
  updateTime: Date | null
  permsEntityList: RowPerms[] | null
}
interface RowPerms {
  permsID: number | null
  parentPermsID: number | null
  permsName: string | null
  permsCode: string | null
  createTime: Date | null
  updateTime: Date | null
}
interface RowUser {
  UID: number | null
  userName: string | null
  permsEntityList: RowPerms[] | null
  roleEntityList: RowRole[] | null
}
let UserList = ref<RowUser[]>([])

// 查询用户
function getUserRoleAndPerms() {
  var param = {
    roleName: '',
  }
  api.post('public/users/getUserRoleAndPerms').then((response: any) => {
    UserList.value = <RowUser[]>response.data.data.users
    // 处理服务器返回的响应
  }).catch((error: any) => { }).finally(() => {})
}

//删除用户对应的角色
function on_deleteUserRole(UID: number, roleID: number) {
  var param={
    "UID":UID,
    "roleID":roleID
  }
  api.post('public/users/deleteUserRole', param).then((response: any) => {
    // 处理服务器返回的响应
    if(response.data.code=200){getUserRoleAndPerms()}
  }).catch((error: any) => { }).finally(() => {})

}

//删除用户对应的权限
function on_deleteUserPerms(UID: number, permsID: number) {
  var param={
    "UID":UID,
    "permsID":permsID
  }
  api.post('public/users/deleteUserPerms', param).then((response: any) => {
    // 处理服务器返回的响应
    if(response.data.code=200){getUserRoleAndPerms()}
  }).catch((error: any) => { }).finally(() => {})
}

function on_dialogRole(UID: number) {
  dialogRole_show.value=true;
  dialog_UID.value=UID
  
}
function on_dialogPerms(UID: number) {
  dialogPerms_show.value=true;
  dialog_UID.value=UID
}

watch(search, (newVal, oldVal) => {
  getUserRoleAndPerms()
}, { deep: true }) // 深层监控


onMounted(() => {
  getUserRoleAndPerms()
});
</script>
  